<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="../../docs/logo.png">
    <script src="../../build/image3D.js"></script>
    <title>修改着色器 | 测试</title>
    <!-- 顶点着色器 -->
    <script type='x-shader/x-vertex' id='vs1'>
        void main(){
            gl_Position=vec4(0.0,0.0,0.0,1.0);
            gl_PointSize=100.0;
        }
    </script>
    <script type='x-shader/x-vertex' id='vs2'>
        void main(){
            gl_Position=vec4(0.5,0.5,0.0,1.0);
            gl_PointSize=50.0;
        }
    </script>

    <!-- 片段着色器 -->
    <script type='x-shader/x-fragment' id='fs1'>
        void main(){
            gl_FragColor=vec4(0.0,0.0,1.0,1.0);
        }
    </script>
    <script type='x-shader/x-fragment' id='fs2'>
        void main(){
            gl_FragColor=vec4(1.0,0.0,1.0,1.0);
        }
    </script>
</head>

<body>

    <canvas width=500 height=500>非常抱歉，您的浏览器不支持canvas!</canvas>

    <script>

        // 创建3D对象并配置好画布和着色器
        var image3d = new image3D(document.getElementsByTagName('canvas')[0], {
            "vertex-shader": document.getElementById("vs1").innerText,
            "fragment-shader": document.getElementById("fs1").innerText
        });
        var painter = image3d.Painter();

        painter.drawPoint(0, 1);

        // 修改着色器后再试试
        image3d.setShader(document.getElementById("vs2").innerText, document.getElementById("fs2").innerText);
        painter.drawPoint(0, 1);


    </script>

</body>

</html>